<template>
  <div class="home">
    Welcome to Your Vue.js App
    <div class="title">Mock 数据</div>
    <template v-for="(item, index) in mockUser">
      <div :key="index">
        <span> {{ item }} </span>
      </div>
    </template>
    <div class="title" @click="goTo">API 数据</div>
    <template v-for="(item, index) in apiUser">
      <div :key="index">
        <span> {{ item }} </span>
      </div>
    </template>
  </div>
</template>

<script>
// @ is an alias to /src
// import { getUserInfo } from "../api/api"
import { getUserInfos } from "@/api/mock"

export default {
  name: "Home",
  data() {
    return {
      mockUser: {},
      apiUser: {},
    }
  },
  components: {},
  mounted() {
    let that = this
    // getUserInfo().then((res) => {
    //   that.apiUser = res[0]
    // })
    getUserInfos().then((res) => {
      that.mockUser = res.data
    })
  },
  methods: {
    goTo(){
      this.$router.push({
        path: '/commonModules',
      })
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  text-align: left;
}
</style>
